<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Dojo Tooltip Placement Test</title>

	<script type="text/javascript" src="boilerplate.js"></script>

	<style type="text/css">
		div {font-size:9px}
	</style>

	<script type="text/javascript">
		require([
			"doh/runner",
			"dojo/dom", "dojo/dom-geometry", "dojo/dom-style", "dojo/query", "dojo/sniff", "dojo/window",
			"dijit/Tooltip",
			"dojo/domReady!"
		], function(doh, dom, domGeom, domStyle, query, has, winUtils, Tooltip){
			doh.register("setup", function(){
				Tooltip._MasterTooltip.prototype.duration = 0.05; // speed up tooltip fading
				var view = winUtils.getBox();
				var width = view.w;
				var height = view.h;

				if(width < 600){
					//Make the larger tooltips smaller so they fit on the page and pass all tests
					dom.byId("test2").setAttribute("promptMessage", "really really really really really really really really really really really really really really really really really really really really");
					dom.byId("test5").setAttribute("promptMessage", "really really really really really really really really really really really really really really really really really really really really");
					dom.byId("test12").setAttribute("promptMessage", "really really really really really really really really really really really really really really really really really really really really");
					dom.byId("test17").setAttribute("promptMessage", "really really really really really really really really really really really really really really really really really really really really");
					dom.byId("test19").setAttribute("promptMessage", "really really really really really really really really really really really really really really really really really really really really");
				}else if(width > 1200){
					//Make a shorter tooltip longer in order to span the whole width
					dom.byId("test1").setAttribute("promptMessage", "really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really<br><br><br><br><br><br><br><br><br><br><br><br><br><br>a");
					dom.byId("test4").setAttribute("promptMessage", "really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really<br><br><br><br><br><br><br><br><br>a");
					dom.byId("test10").setAttribute("promptMessage", "really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really<br><br><br><br><br><br><br><br><br>a");
					dom.byId("test20").setAttribute("promptMessage", "really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really<br><br><br><br><br><br><br><br><br>a");
				}
				
				if(height < 600){
					//Make the taller tooltips shorter
					for(var i=1;i<22;i++){
						if(i==7){
							//skip
						}else{
							dom.byId("test"+i+"_tall_skinny").setAttribute("promptMessage", "<br><br><br><br>a");
						}
					}
				}
				
				domStyle.set("test1", "width", width*(0.3)+"px");
				domStyle.set("test1_tall_skinny", "width", width*(0.3)+"px");
				domStyle.set("test2", "width", width*(0.6)+"px");
				domStyle.set("test2_tall_skinny", "width", width*(0.6)+"px");
				domStyle.set("test3", "width", width*(0.9)+"px");
				domStyle.set("test3_tall_skinny", "width", width*(0.9)+"px");
				domStyle.set("test4", "width", width*(0.3)+"px");
				domStyle.set("test4_tall_skinny", "width", width*(0.3)+"px");
				domStyle.set("test5", "width", width*(0.6)+"px");
				domStyle.set("test5_tall_skinny", "width", width*(0.6)+"px");
				domStyle.set("test6", "width", width*(0.9)+"px");
				domStyle.set("test6_tall_skinny", "width", width*(0.9)+"px");
				domStyle.set("test7", "width", width*(1.1)+"px");
				domStyle.set("test8", "width", width*(0.2)+"px");
				domStyle.set("test8_tall_skinny", "width", width*(0.2)+"px");
				domStyle.set("test9", "width", width*(0.3)+"px");
				domStyle.set("test9_tall_skinny", "width", width*(0.3)+"px");
				domStyle.set("test10", "width", width*(0.6)+"px");
				domStyle.set("test10_tall_skinny", "width", width*(0.6)+"px");
				domStyle.set("test11", "width", width*(0.9)+"px");
				domStyle.set("test11_tall_skinny", "width", width*(0.9)+"px");
				domStyle.set("test12", "width", width*(0.3)+"px");
				domStyle.set("test12_tall_skinny", "width", width*(0.3)+"px");
				domStyle.set("test13", "width", width*(0.6)+"px");
				domStyle.set("test13_tall_skinny", "width", width*(0.6)+"px");
				domStyle.set("test14", "width", width*(0.9)+"px");
				domStyle.set("test14_tall_skinny", "width", width*(0.9)+"px");
				domStyle.set("test15", "width", width*(0.9)+"px");
				domStyle.set("test15_tall_skinny", "width", width*(0.9)+"px");
				domStyle.set("test16", "width", width*(0.3)+"px");
				domStyle.set("test16_tall_skinny", "width", width*(0.3)+"px");
				domStyle.set("test17", "width", width*(0.6)+"px");
				domStyle.set("test17_tall_skinny", "width", width*(0.6)+"px");
				domStyle.set("test18", "width", width*(0.9)+"px");
				domStyle.set("test18_tall_skinny", "width", width*(0.9)+"px");
				domStyle.set("test19", "width", width*(0.3)+"px");
				domStyle.set("test19_tall_skinny", "width", width*(0.3)+"px");
				domStyle.set("test20", "width", width*(0.6)+"px");
				domStyle.set("test20_tall_skinny", "width", width*(0.6)+"px");
				domStyle.set("test21", "width", width*(0.9)+"px");
				domStyle.set("test21_tall_skinny", "width", width*(0.9)+"px");
			});

			//Verify the following is true:
			//	1. The tooltip is displayed to the right or the left of the textbox
			//	2. The tooltip arrow is next to the textbox
			//	3. The user can view the entire tooltip on the screen OR the tooltip is displayed on the side with the largest width available
			//	4. If the tooltip is not completely visible, verify that it uses all available height
			function testRightOrLeft(textbox, verifyFullWidthIsUtilized){
				verifyTooltipArrowPosition(textbox);

				var textboxPos = domGeom.position(textbox);
				var tooltipContainerPos = domGeom.position(query(".dijitTooltip")[0]);
				
				var xDiff = textboxPos.x - tooltipContainerPos.x - tooltipContainerPos.w;
				var toTheLeft = xDiff >= -0.5 && xDiff < 2;

				xDiff = tooltipContainerPos.x - textboxPos.x - textboxPos.w;
				var toTheRight = xDiff >= -0.5 && xDiff < 2;

				doh.t(toTheLeft || toTheRight, "The tooltip was not to the left or right");

				var tooltip = Tooltip._masterTT.containerNode;
				var tooltipPos = domGeom.position(tooltip);

				var view = winUtils.getBox();
				var isIE6 = has("ie") < 7;
				//verify the entire width is utilized.  Small tooltips will not utilize the entire width.
				if(verifyFullWidthIsUtilized && !isIE6 && !has("opera")){
					if(toTheLeft){
						doh.t(tooltipContainerPos.w + 3/*space in between arrow and textbox*/ >= textboxPos.x, "The entire width was not utilized to the left");					
					}else{
						doh.t(tooltipContainerPos.w + 3/*space in between arrow and textbox*/ >= view.w - tooltipContainerPos.x, "The entire width was not utilized to the right");
					}
				}
			
				//If we cannot view the entire tooltip, verify they side with the most space was chosen and the entire height was utilized.
				var canViewEntireTooltip = (tooltipContainerPos.x + tooltipContainerPos.w <= view.w+1) && 
										   (tooltipPos.y + tooltipPos.h <= view.h+1);			
				if(!canViewEntireTooltip && !isIE6 && !has("opera")){
					if(toTheLeft){
						//verify there is more space on the left than the right
						doh.t(textboxPos.x >= (view.w - textboxPos.x - textboxPos.w), "There is not more space on the left than the right");
					}else{
						doh.t(textboxPos.x <= (view.w - textboxPos.x - textboxPos.w), "There is not more space on the right than the left");
					}
					//verify the entire height is utilized
					doh.t(tooltipPos.h >= view.h, "The entire height was not utilized. Tooltip height="+tooltipPos.h+". View height="+view.h);
				}
			}
			
			function toTheLeftOrRight(textbox){
				var textboxPos = domGeom.position(textbox);
				var tooltipContainerPos = domGeom.position(query(".dijitTooltip")[0]);
				
				var xDiff = textboxPos.x - tooltipContainerPos.x - tooltipContainerPos.w;
				var toTheLeft = xDiff >= -1 && xDiff < 2;

				xDiff = tooltipContainerPos.x - textboxPos.x - textboxPos.w;
				var toTheRight = xDiff >= -1 && xDiff < 2;

				doh.t(toTheLeft || toTheRight, "The tooltip was not to the left or right");
			}
			
			//Verify the tooltip arrow is next to the textbox
			function verifyTooltipArrowPosition(textbox){
				var textboxPos = domGeom.position(textbox);
				var tooltipConnectorPos = domGeom.position(query(".dijitTooltipConnector")[0]);
				
				var middleOfTextbox = textboxPos.y + (textboxPos.h / 2);
				var middleOfTooltipConnector = tooltipConnectorPos.y + (tooltipConnectorPos.h /2);

				var yDiff = middleOfTextbox - middleOfTooltipConnector;
				var yAxisValid = yDiff <= 2 && yDiff >= -1.5; //tooltip arrow is at a similar y coord as the box
				doh.t(yAxisValid, "Y axis is invalid. yDiff was: "+yDiff);
			}
			
			// Test for when the tooltip has large words or nowrap so that it can't be displayed properly,
			// given the space available.   Verify the following is true:
			//	   1. The tooltip arrow is next to the textbox
			// Note that tooltip text may be cut off if there wasn't enough room to display the tooltip
			// to the left/right of the anchor node
			function testNoWrapOrLargeWords(textbox){
				verifyTooltipArrowPosition(textbox);
			}
		
			function testAboveBelow(textbox, verifyConnectorPosition){
				var textboxPos = domGeom.position(textbox);
				var tooltipConnectorPos = domGeom.position(query(".dijitTooltipConnector")[0]);
				var tooltipContainerPos = domGeom.position(query(".dijitTooltip")[0]);

				if(verifyConnectorPosition){
					var xAxisValid = textboxPos.x <= tooltipConnectorPos.x && tooltipConnectorPos.x <= (textboxPos.x + textboxPos.w);
					doh.t(xAxisValid, "X axis is invalid");
				}
			
				//verify the tooltip is above or below the textbox
				var yDiff = textboxPos.y - tooltipContainerPos.y - tooltipContainerPos.h;
				var above = yDiff >= -0.5 && yDiff < 1;
	
				yDiff = tooltipContainerPos.y - textboxPos.y - textboxPos.h;
				var below = yDiff >= -0.5 && yDiff < 1;

				doh.t(above || below, "above || below, yDiff == " + yDiff);
			}

			for(var i=1; i<=21; i++){
				if(i==7){ continue; }
				(function(i){
					// Need the closure to run tests on each node, rather than repeating on "test21" node
					var node = dom.byId("test"+i),
						skinnyNode = dom.byId("test"+i+"_tall_skinny"),
						nowrapTest = (i==3 || i==6 || i==8 || i==9 || i==13 || i==16 || i==21);
					doh.register("test" + i, [
						{
							name: "test"+i+"_tall_skinny",
							runTest: function(){
								var d = new doh.Deferred();
								winUtils.scrollIntoView(skinnyNode);
								Tooltip.show(skinnyNode.getAttribute("promptMessage"), skinnyNode);
								setTimeout(d.getTestCallback(function(){
									// use timeout to wait for fade out of tooltip from old position, and fade in to new position
									testRightOrLeft(skinnyNode, false);
								}), 100);
								return d;
							}
						},
						{
							name: "test"+i,
							runTest: function(){
								var d = new doh.Deferred();
								winUtils.scrollIntoView(node);
								Tooltip.show(node.getAttribute("promptMessage"), node);
								setTimeout(d.getTestCallback(function(){
									// use timeout to wait for fade out of tooltip from old position, and fade in to new position
									if(nowrapTest){
										// For nowrap tests  we should only verify the arrow is pointing to the textbox
										testNoWrapOrLargeWords(node);
									}else{
										testRightOrLeft(node, true);
									}
								}), 100);
								return d;
							}
						},
						{
							name: "test"+i+"_lrs",
							runTest: function(){
								var d = new doh.Deferred();
								Tooltip.show("!", node);
								setTimeout(d.getTestCallback(function(){
									// use timeout to wait for fade out of tooltip from old position, and fade in to new position
									testRightOrLeft(node, false);
								}), 100);
								return d;
							}
						},
						{
							name: "test"+i+"_abs",
							runTest: function(){
								var d = new doh.Deferred();
								winUtils.scrollIntoView(node);
								Tooltip.hide(node);	// needed since show() below matches node & content of show() above
								Tooltip.show("!", node, ["below", "above"]);
								setTimeout(d.getTestCallback(function(){
									// use timeout to wait for fade out of tooltip from old position, and fade in to new position
									testAboveBelow(node, true);
								}), 100);
								return d;
							}
						},
						{
							name: "test"+i+"_ab",
							runTest: function(){
								var d = new doh.Deferred();
								Tooltip.show(node.getAttribute("promptMessage"), node, ["below", "above"]);
								setTimeout(d.getTestCallback(function(){
									// use timeout to wait for fade out of tooltip from old position, and fade in to new position
									if(nowrapTest){
										// For nowrap tests we should only verify the arrow is pointing to the textbox
										// (in most cases it's off the screen)
										testAboveBelow(node, false);
									}else{
										testAboveBelow(node, true);
									}
								}), 100);
								return d;
							}
						},
						{
							name: "test"+i+"_ab_tall_skinny",
							runTest: function(){
								var d = new doh.Deferred();
								winUtils.scrollIntoView(skinnyNode);
								Tooltip.show(skinnyNode.getAttribute("promptMessage"), skinnyNode, ["below", "above"]);
								setTimeout(d.getTestCallback(function(){
									// use timeout to wait for fade out of tooltip from old position, and fade in to new position
									testAboveBelow(skinnyNode, true);
								}), 100);
								return d;
							}
						}
					]);
				})(i);	// end closure
			}

			doh.register("anchor inside overflowed div", [
				{
					name: "test22",
					runTest: function(){
						var d = new doh.Deferred();
						var node = dom.byId("test22");
						var cp = dom.byId("test22_cp");
						winUtils.scrollIntoView(cp);
						Tooltip.hide(node);	// needed since show() below matches node & content of show() above
						Tooltip.show(node.getAttribute("promptMessage"), node);
						setTimeout(d.getTestCallback(function(){
							// use timeout to wait for fade out of tooltip from old position, and fade in to new position
							toTheLeftOrRight(cp, true);
						}), 100);
						return d;
					}
				},
				{
					name: "test23",
					runTest: function(){
						var d = new doh.Deferred();
						var node = dom.byId("test23");
						var cp = dom.byId("test23_cp");
						Tooltip.show(node.getAttribute("promptMessage"), node, null, true);
						setTimeout(d.getTestCallback(function(){
							// use timeout to wait for fade out of tooltip from old position, and fade in to new position
							toTheLeftOrRight(cp, true);
						}), 100);
						return d;
					}
				}
			]);

			if(has("svg")){
				doh.register("svg tooltip", [
					{
						name: "setup",
						runTest: function(){
							document.body.insertAdjacentHTML("beforeend",
								"<div id='svgWrapper' style='position: relative; top: 100px; left: 100px;'>" +
									"<svg xmlns='http://www.w3.org/2000/svg' version='1.1'>" +
										"<rect id='theRectangle' width='300' height='100' " +
											"style='fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)' />" +
									"</svg>" +
								"</div>"
							);
							winUtils.scrollIntoView("svgWrapper");
						}
					},
					{
						name: "display",
						runTest: function(){
							var d = new doh.Deferred();
							var cp = dom.byId("theRectangle");
							Tooltip.show("SVG tooltip", cp, null, true);
							setTimeout(d.getTestCallback(function(){
								// use timeout to wait for fade out of tooltip from old position, and fade in to new position
								toTheLeftOrRight(cp, true);
							}), 100);
							return d;
						}
					}
				]);
			}

			doh.run();
		});
	</script>
</head>
<body class="claro">
<table>

	<tr>
	<td style="text-align:right;">
		<input type="text" id="test1" promptMessage='really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really<br><br><br><br><br><br><br><br><br><br><br><br><br><br>a'/>
	</td>
	</tr>	
	<tr>
	<td style="text-align:right;">
		<input type="text" id="test1_tall_skinny" name="test1_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:right;">
		<input type="text" id="test2" promptMessage='really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really reallyreally really really really really really really really really really really really really reallyreally really really really really really really really really really really really really reallyreally really really really really really really really really really really really really reallyreally really really really really really really really really really really really really reallyreally really really really really really really really really really really really really reallyreally really really really really really really really really really really really really reallyreally really really really really really really really really really really really really reallyreally really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really really really really really really really really really really really really reallybig'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:right;">
		<input type="text" id="test2_tall_skinny" name="test2_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:right;">
		<input type="text" id="test3" promptMessage='reallyreallylonggermanwordreallyreallyreallyreallyreallyreallyreallylongword big'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:right;">
		<input type="text" id="test3_tall_skinny" name="test3_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:left;">
		<input type="text" id="test4" promptMessage='really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really<br><br><br><br><br><br><br><br><br>a'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:left;">
		<input type="text" id="test4_tall_skinny" name="test4_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:left;">
		<input type="text" id="test5" promptMessage='really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallybig'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:left;">
		<input type="text" id="test5_tall_skinny" name="test5_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:left;">
		<input type="text" id="test6" promptMessage="<div style='white-space: nowrap'>really really really really big</div>"/>
	</td>
	</tr>
	<tr>
	<td style="text-align:left;">
		<input type="text" id="test6_tall_skinny" name="test6_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:left;">
		<input type="text" id="test7" name="test7"/>
	</td>
	</tr>
	<tr>
	<td style="text-align:left;">
		<input type="text" id="test8" promptMessage="<div style='white-space: nowrap'>really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really<br><br><br><br><br><br><br><br><br><br><br><br><br><br>a</div>"/>
	</td>
	</tr>
	<tr>
	<td style="text-align:left;">
		<input type="text" id="test8_tall_skinny" name="test8_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:left;">
		<br><br>
	</td>
	</tr>
	<tr>
	<td style="text-align:right;">
		<input type="text" id="test9" promptMessage='reallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallylongword'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:right;">
		<input type="text" id="test9_tall_skinny" name="test9_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:right;">
		<input type="text" id="test10" promptMessage='really really really really really really really really really really really really really really really really really really really<br><br><br><br><br><br><br><br><br><br><br><br><br><br>a'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:right;">
		<input type="text" id="test10_tall_skinny" name="test10_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:right;">
		<input type="text" id="test11" promptMessage='a a a a a a a a a a a a a a a a a a a a a a a a a a a a<br><br><br><br><br><br><br><br><br><br><br><br><br><br>a'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:right;">
		<input type="text" id="test11_tall_skinny" name="test11_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:left;">
		<input type="text" id="test12" promptMessage='really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really really big'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:left;">
		<input type="text" id="test12_tall_skinny" name="test12_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:left;">
		<input type="text" id="test13" promptMessage="<div style='white-space: nowrap'>really really really really really really really really really really really really really really really really really big</div>"/>
	</td>
	</tr>
	<tr>
	<td style="text-align:left;">
		<input type="text" id="test13_tall_skinny" name="test13_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:left;">
		<input type="text" id="test14" promptMessage='really really really really really really really really really really really really really really really really really really really really really really really big'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:left;">
		<input type="text" id="test14_tall_skinny" name="test14_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:left;">
		<input type="text" id="test15" promptMessage='a a a a a a a a a a a a a a a a a a<br><br><br><br><br><br><br><br><br><br><br>a'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:left;">
		<input type="text" id="test15_tall_skinny" name="test15_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:left;">
		<br>
	</td>
	</tr>	
	<tr>
	<td style="text-align:right;">
		<input type="text" id="test16" promptMessage='reallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallylongword big word really big word'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:right;">
		<input type="text" id="test16_tall_skinny" name="test16_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:right;">
		<input type="text" id="test17" promptMessage='really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really really big'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:right;">
		<input type="text" id="test17_tall_skinny" name="test17_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:right;">
		<input type="text" id="test18" promptMessage='a a a a a a a a a a a a a a a a a a a a a a<br><br><br><br><br><br><br><br><br><br><br><br><br><br>a'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:right;">
		<input type="text" id="test18_tall_skinny" name="test18_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:left;">
		<input type="text" id="test19" promptMessage='really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really reallyreally really really really really really really really really really really really really really really really really big'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:left;">
		<input type="text" id="test19_tall_skinny" name="test19_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:left;">
		<input type="text" id="test20" promptMessage='really really really really really really really really really really really really really really really really really really really<br><br><br><br><br><br><br><br><br><br><br><br><br><br>a'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:left;">
		<input type="text" id="test20_tall_skinny" name="test20_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:left;">
		<input type="text" id="test21" promptMessage='reallyreallyreallyreallyreallyreallylongword<br><br><br><br><br><br><br><br><br><br><br><br><br><br>a'/>
	</td>
	</tr>
	<tr>
	<td style="text-align:left;">
		<input type="text" id="test21_tall_skinny" name="test21_tall_skinny" promptMessage='<br><br><br><br><br><br><br><br><br><br><br>a'/>
	</td>
	</tr>
</table>

<div id="test22_cp" style="height:90px; width:100px; padding:0px; overflow: auto;">
   <input type="text" id="test22" style="fontSize:100pt" promptMessage='test overflow'/>
<br><br><br><br><br>
</div>

<table width='100%' align='left'><tr><td width='95%'></td><td style="width:5%">
<div id="test23_cp" dir='rtl' style="height:100px; width:100px; border:1px; overflow:scroll">
   <input type="text" id="test23" dir='rtl' style="fontSize:20pt" promptMessage='test overflow'/>
</div>
</td></tr></table>

</body>
</html>
